<template>
	<view class="background">
		<view class="tab">
			<view
				v-for="(tabItem, tabIndex) in tabSource"
				:key="tabIndex"
				@click="tabChange(tabItem.vlaue)"
				class="tab-item">
				<text :class="{'tab-item-text-activ': activTab === tabItem.vlaue}">{{tabItem.lable}}</text>
				<view class="tab-item-bottom-line" :class="{'tab-item-bottom-line-activ': activTab === tabItem.vlaue}"/>
			</view>
		</view>
		<view v-if="!isSignIn" class="sin_in_btn">
			<button size="mini" type="primary" @click="toLogin">请登录</button>
		</view>
		<view  style="height: calc(100% - 100upx);">
			<view 
				v-if="orderList.length === 0" 
				style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
				<text>暂无记录~</text>
			</view>
			<scroll-view 
				v-else
				scroll-y="true" 
				class="scroll_view">
				<view
					v-for="(order, orderIndex) in orderList"
					:key="orderIndex"
					class="order_item">
					<view class="order_item_head">
						<view class="order_time">
							<image 
								src="../../static/icon_time_gray.png" 
							/>
							<text>{{order.fromTime ? order.fromTime.substring(0, 16) : ''}}</text>
						</view>
						<text 
							:style="{'color': orderState[order.orderState].color}">
							{{orderState[order.orderState].lable}}
						</text>
					</view>
					<view class="order_info">
						<view class="order_info_item">
							<!-- <view class="site_sign" style="background: #2697FF;"/> -->
							<text style="margin-left: 10upx;">{{order.fromCity}}</text>
							<text style="margin: 0 20upx;"> 一 </text>
							<!-- <view class="site_sign" style="background: #FF603F;"/> -->
							<text style="margin-left: 10upx;">{{order.endCity}}</text>
						</view>
						<!-- <view class="order_info_item" style="justify-content: space-between;">
							<view class="order_info_item">
								<view class="site_sign" style="background: #FF603F;"/>
								<text style="font-weight: 800; margin-left: 10upx;">{{order.endCity}}</text>
								<view class="site_sign" style="background: #2C2F33; width: 10upx; height: 10upx; margin-left: 10upx;"/>
								<text style="font-weight: 400; margin-left: 10upx;">{{}}</text>
							</view>
							<view class="">
								<text style="font-size: 26upx; color: red;">￥</text>
								<text style="font-weight: bold; color: red;">{{order.totalAmount}}</text>
							</view>
						</view> -->
						<view class="order_info_item" style="height: 50upx; justify-content: space-between;">
							<view class="order_info_item">
								<!-- <view class="site_sign" style="background: #2697FF; opacity: 0;"/> -->
								<text 
									space="ensp"
									style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
									{{`乘车人数: ${order.countPassenger}人`}}
								</text>
							</view>
							<view class="">
								<text style="font-size: 26upx; color: red;">￥</text>
								<text style="font-weight: bold; color: red;">{{order.totalAmount}}</text>
							</view>
						</view>
					</view>
					<view class="order_item_btn_warp">
						<view
							@click.stop="toDetail(order.orderId)"
							class="rder_item_btn" style="border-color: #26A9FF; color: #26A9FF;">
							<text>查看详情</text>
						</view>
						<view
							@click.stop="cancel(order.orderId)"
							v-if="order.orderState == 1"
							class="rder_item_btn" style="border-color: #f56c6c; color: #f56c6c;">
							<text>取消订单</text>
						</view>
						<view
							@click.stop="backMoney(order.orderId)"
							v-if="order.orderState == 5"
							class="rder_item_btn" style="border-color: #FF8103; color: #FF8103;">
							<text>退款</text>
						</view>
						<view
							@click.stop="openTicket(order.orderId)"
							v-if="order.orderState == 6 && order.isInvoiceState == 2 "
							class="rder_item_btn" style="border-color: #4D7DF7; color: #4D7DF7;">
							<text>开发票</text>
						</view>
						<view
							@click.stop="payOrder(order)"
							v-show="order.orderState == 1"
							class="rder_item_btn" style="border-color: ##67c23a; color: #67c23a;">
							<text>去支付</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import api from '../../api';
	export default {
		data() {
			return {
				isSignIn: false,
				orderList: [],
				activTab: '', // 当前激活的tab
				tabSource: [
					{vlaue: '', lable: '全部'},
					{vlaue: '1', lable: '待支付'},
					{vlaue: '5', lable: '待出行'},
				],
				orderState: {
					1: { color: '#FF603F', lable: '待支付'},
					2: { color: 'gray', lable: '已支付'},
					5: { color: '#FF8103', lable: '待出行'},
					6: { color: '#949699', lable: '已出行'},
					7: { color: '#949699', lable: '已取消'},
					9: { color: '#949699', lable: '退款中'},
					10: { color: '#949699', lable: '退款成功'},
					11: { color: '#949699', lable: '取消退款'},
					12: { color: '#949699', lable: '退款失败'},
				}
			}
		},
		
		onPullDownRefresh() {
			this.getOrderList();
		},
		
		onLoad() {
			if(uni.getStorageSync("token")) {
				this.isSignIn = true;
				uni.startPullDownRefresh();
			}
			else {
				this.isSignIn = false;
			}
		},
		
		methods: {
			async getOrderList() {
				uni.showLoading({ title:'加载中' });
				const {code, data} = await api.order.queryOrdersByUserId({state: this.activTab, type:'', pageNo:1, pageSize:100});
				if(code === 200) {
					const { list } = data;
					this.orderList = list;
				}
				uni.hideLoading();
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			},
			
			// 取消订单
			cancel(id) {
				uni.showModal({
					content:'确定取消订单？',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({ title:'订单取消...' });
							const {code} = await api.order.cancelOrder({id});
							if(code === 200) {
								uni.showToast({
									title:'取消成功'
								})
								this.getOrderList();
								return ;
							}
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								duration: 3000,
								icon: 'none'
							});
						} 
					}
				})
			},
			
			// 支付订单
			async payOrder({scheduleDetailId, orderId}){
				uni.showLoading({ title: '支付中' });
				const { code, data } = await api.order.payOrder({scheduleDetailId,orderId});
				if(code ==200){
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr:data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) => {
							uni.hideLoading()
							uni.reLaunch({
								url: '../order/order'
							});
						},
						fail: (res) => {
							uni.hideLoading()
						}
					});
				}
			},
			
			// 退款
			backMoney(orderId) {
				uni.showModal({
					content: '确定要退款吗？',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({ title:'退款中...' });
							const { code, data, msg } = await api.order.refundById({ orderId });
							if (code == 200) {
								uni.hideLoading()
								uni.showToast({
									title: '退款成功',
									duration: 1500,
									icon: 'none'
								});
								this.getOrderList(this.activTab);
							} 
							else {
								uni.hideLoading()
								uni.showModal({
									content: msg,
									showCancel: false
								})
							}
						} 
					}
				});
			},
			
			// 开发票
			openTicket(orderId) {
				uni.navigateTo({
					url: `/pages/ticket/ticket-open?orderId=${orderId}`
				})
			},
			
			tabChange(activ) {
				console.log(activ);
				this.activTab = activ;
				this.getOrderList();
			},
			
			toDetail(orderId){
				console.log(orderId);
				uni.navigateTo({
					url: `/pages/order/order-detail?orderId=${orderId}`
				})
			},
			
			toLogin() {
				uni.navigateTo({
					url: '/pages/auth/index',
				})
			},
		}
	}
</script>

<style lang="scss">
	.background {
		background-color: #F7F7F7;
		height: 100%;
		.sin_in_btn {
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.tab {
			display: flex;
			flex-direction: row;
			height: 100upx;
			background: #FFFFFF;
			.tab-item {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				text-align: center;
				flex: 1;
				font-size: 34rpx;
				color: #5E6166;
			}
			.tab-item-bottom-line {
				height: 8upx;
				width: 80upx;
				border-radius: 10upx;
			}
			.tab-item-text-activ {
				font-weight: bold;
				color: #2C2F33;
			}
			.tab-item-bottom-line-activ {
				background: #2697FF;
			}
		}
		.scroll_view {
			height: 100%;
			width: 100%;
			.order_item {
				background: #FFFFFF;
				border-radius: 16upx;
				padding: 20upx 20upx 0 20upx;
				margin: 20upx;
				.order_item_head {
					height: 80upx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					border-bottom: solid 1upx #EFEFEF;
					.order_time {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-size: 32rpx;
						font-weight: 400;
						line-height: 30upx;
						color: #949699;
						image {
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
						}
					}
					text {
						font-size: 32rpx;
						color: #000000;
						font-weight: 800;
					}
				}
				.order_info {
					.order_info_item {
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 75upx;
						margin-bottom: 20upx;
						font-size: 32rpx;
						.site_sign {
							width: 20upx;
							height: 20upx;
							border-radius: 50%;
						}
					}
				}
				.order_item_btn_warp {
					display: flex;
					flex: row;
					flex-direction: row-reverse;
					align-items: center;
					height: 100upx;
					border-top: dashed 1upx #A9A9A9;
					.rder_item_btn {
						width: 180upx;
						height: 70upx;
						border-radius: 16upx;
						border-style: solid;
						border-width: 1upx;
						line-height: 70upx;
						font-size: 30rpx;
						text-align: center;
						margin-left: 10upx;
					}
				}
			}
		}
	}
</style>
